<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Table</title>
		<link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="__CSS__/v1.css" media="all" />
		<link rel="stylesheet" href="__CSS__/global.css" media="all">
		<link rel="stylesheet" href="__STATIC__/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="__CSS__/table.css" />
		<script type="text/javascript">
			var SYS		= {'root':'__STATIC__'},
				CONFIG	= {$pageConfig};
		</script>
	</head>

	<body>
		<div class="admin-main">

			<blockquote class="layui-elem-quote">
				<a href="javascript:;" class="layui-btn layui-btn-small" id="addBlank"><i class="layui-icon">&#xe608;</i> 添加信息</a>
				<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-small" id="destory"><i class="layui-icon">&#xe608;</i> 删除数据</a>
				<a href="#" class="layui-btn layui-btn-small" id="import"><i class="layui-icon">&#xe608;</i> 导入信息</a>
				<a href="#" class="layui-btn layui-btn-small"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 导出信息</a>
				<a href="javascript:;" class="layui-btn layui-btn-small" id="search"><i class="layui-icon">&#xe615;</i> 搜索</a>
			</blockquote>
			<fieldset class="layui-elem-field">
				<legend>数据列表</legend>
				<div class="layui-field-box layui-form">
					<table class="layui-table admin-table">
						<thead>
							<tr>
								<th width="5%"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
								<th width="5%">ID</th>
								<th width="10%">分类</th>
								<th width="20%">标题</th>
								<th width="30%">描述</th>
								<th width="15%">创建时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="content">
						</tbody>
					</table>
				</div>
			</fieldset>
			<div class="admin-table-page">
				<div id="paged" class="page">
				</div>
			</div>
		</div>
		<!--列表模板-->
		<script type="text/html" id="tpl">
			{{# layui.each(d.list, function(index, item){ }}
			<tr>
				<td><input type="checkbox" lay-skin="primary"></td>
				<th>{{ item.id }}</th>
				<th>{{ item.category_id }}</th>
				<td data-field="title">{{ item.title }}</td>
				<td>{{ item.description }}</td>
				<td>{{ item.create_time }}</td>
				<td data-key="{{ item.id }}">
					<a href="/detail-1" target="_blank" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
					<a href="javascript:;" data-opt="edit" class="layui-btn layui-btn-mini">编辑</a>
					<a href="javascript:;" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
				</td>
			</tr>
			{{# }); }}
		</script>
		<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
		<script type="text/javascript" src="__STATIC__/admin/js/admin.js"></script>
		<script>


			layui.use(['paging', 'form', 'element'], function() {
				var $ = layui.jquery,
					paging = layui.paging(),
					layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
					layer = layui.layer, //获取当前窗口的layer对象
					form = layui.form(),
					element = layui.element();
				//操作定义块
  				var artAction = {
  					destory: function(ids){
						if(ids.length == 0){
							return false;
						}
						
  						layer.confirm('确定要删除 <span style="color:red;">'+JSON.stringify(ids)+'</span> 吗?', {
						time:0,icon:3,title:'系统提示'}, function(){

						$.ajax(
							{
								type:'post',
								url: CONFIG.base_uri+"/destroys/",
								async : true,
								data : {
									"type": 'delete',
									"ids" : ids
								},
								dataType : "json",
								beforeSend:function(){console.log('beforeSend');},
								success:function(data){
									//移除元素
									$('#content').children('tr').each(function(){
										$this = $(this);
										if($.inArray(Number($this.children('td[data-key]').data('key')),ids) > -1 || Number($this.children('td[data-key]').data('key')) == ids)
											$this.remove();
									});
									//提示消息
									layer.msg(data.msg);
								},
								error:function(){console.log('error');},
							}
							
							);


						//$that.parent('td').parent('tr').remove();


						}, function(){

						layer.msg('取消选择', {time: 200});
					});
  					},
  					edit: function(id){
  						//ajax获取页面
						var tabID = parent.tab.tabAdd({
							href: CONFIG.base_uri + '/edit/id/'+id+'/',
							icon:'fa-user',
							title:'编辑['+id+']',
						});
  					},
  					test:function(){}
  				};

				var page =  function()
				{
					paging.init({
				            openWait: true,
				            url: '/admin/archive/getData/aid/'+CONFIG.aid+'/?v=' + new Date().getTime(), //地址
							elem: '#content', //内容容器
							params: { //发送到服务端的参数
							},
							type: 'GET',
							tempElem: '#tpl', //模块容器
							pageConfig: { //分页参数配置
								elem: '#paged', //分页容器
								pageSize: 10, //分页大小
							},
							success: function() { //渲染成功的回调
								//alert('渲染成功');
							},
							fail: function(msg) { //获取数据失败的回调
								//alert('获取数据失败')
							},
							complate: function() { //完成的回调
								//alert('处理完成');
								//重新渲染复选框
								form.render('checkbox');
								form.on('checkbox(allselector)', function(data) {
									var elem = data.elem;

									$('#content').children('tr').each(function() {
										var $that = $(this);
										//全选或反选
										$that.children('td').eq(0).children('input[type=checkbox]')[0].checked = elem.checked;
										form.render('checkbox');
									});
								});

								//绑定所有编辑按钮事件						



								$('#content').children('tr').each(function () {
								    $(this).children('td:last-child').children('a').each(function () {
								        var $that = $(this);
								        var action = $that.data('opt');
								        var id = $that.parent('td').data('key');
								        $that.on('click', function () {
								            switch (action) {
								                case 'edit':
								                    artAction.edit(id);
								                    break;
								                case 'del': //删除
								                    var name = $that.parent('td').siblings('td[data-field=title]').text();
								                    //询问框
								                    artAction.destory(id);
								                    break;
								            }
								        });
								    });
								});

								console.log(BIN);

							},
						});
				}


				page();


				//绑定数据删除操作
				$('#destory').on('click', function() {
					//json对象
					var ids = [];
					$('#content').children('tr').each(function() {
						var $that = $(this);
						var $cbx = $that.children('td').eq(0).children('input[type=checkbox]')[0].checked;
						if($cbx) {
							var id = $that.children('td:last-child').data('key');
							ids.push(id);
						}
					});
					//layer.msg('你选择的ID有：' + ids);

					if(ids.length == 0){
						layer.msg('请先选择要删除的数据', {icon: 1});
						return false;
					}
					artAction.destory(ids);
				});


				$('#search').on('click', function() {
					parent.layer.alert('你点击了搜索按钮')
				});

				$('#addBlank').on('click',function(){
					console.log('增加窗口');
					parent.tab.tabAdd({
						"title": "文章新增",
						"icon": "&#xe63c;",
						"href": "tuduweb/form.html"
					});
				});

				$('#import').on('click', function() {
					var that = this;
					var index = layer.tips('只想提示地精准些', that, { tips: [1, 'white'] });
					$('#layui-layer' + index).children('div.layui-layer-content').css('color', '#000000');
				});
			});
		</script>
	</body>

</html>